{% extends 'big_data/base.html' %}
{% block title  %}
    DashBoard
{% endblock %}
{% block css %}
    <link rel="stylesheet" href="/static/css/dashboard/jobinfo.css">
    <script src="/static/js/echarts/dist/echarts.min.js"></script>
    <script src="/static/js/echarts/dist/extension/bmap.min.js"></script>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=nSxiPohfziUaCuONe4ViUP2N"></script>
    <script type="text/javascript" src="/static/js/theme/roma.js"></script>

{% endblock %}

{% block js %}
    <script>
      function next_page()
      {
          var a=document.getElementById("next");
          var page={{ page }}+1;
          var total_pages={{ total_pages | length}};

          if( page <= total_pages)
          {
              a.setAttribute("href", "/dashboard/jobinfo/{{ unifyName }}/"+page+"/edu");
          }
          else
          {
              confirm("已经到最后一页了.");

          }
      }
      function previous_page()
      {
          var a=document.getElementById("previous");
          var page={{ page }}-1;
          var total_pages={{ total_pages | length}};

          if( page <1)
          {
            confirm("已经到第一页.");
          }
          else
          {
            a.setAttribute("href","/dashboard/jobinfo/{{ unifyName }}/"+page+"/edu");
          }
      }

      function get_option()//得到用户输入的页面后 跳转至该页
      {
        var input=document.getElementById("input");
        var val=parseInt(input.value);
        var total_pages={{ total_pages |length }};

        if(isNaN(val))
        {
          window.alert("请输入一个正确的页数！");
        }
        else if( val>total_pages )
        {
          window.alert("输入页数大于当前最大页数！");
        }
        else
        {
          form.action="/dashboard/jobinfo/{{ unifyName }}/"+val+"/edu";
        }

      }

  </script>
{% endblock %}

{% block right_side %}

<h2 style="text-align: center;">2020年最抢手职位</h2>
<div class="row" id="jobmenu" style="text-align:center;">
  <!--将从views.home得到的值生成li-->
  <div class="form-inline">
  {% for un in uName %}
    <div class="form-group">
      <p style="font-size: 23px;">
    {% if forloop.counter0 < 13 %}
      {% if un == special %}<!--这里因为C#的#属于特殊字符，必须用%23代替，
                                  暂时没想到别的方法-->
          <a href='/dashboard/jobinfo/C%23/1/edu'>{{special}}&nbsp;</a>
      {% else %}
          <a href='/dashboard/jobinfo/{{un}}/1/edu'>{{un}}&nbsp;</a>
      {% endif %}
    {% else %}
      {% if un == special %}
      <!--这里因为C#的#属于特殊字符，必须用%23代替，
                                        暂时没想到别的方法-->
      <a href='/dashboard/jobinfo/C%23/1/edu' id="CsharpButton">{{special}}</a>
      {% else %}
      <a href='/dashboard/jobinfo/{{un}}/1/edu' id="{{un}}Button" style="display: none;">{{un}}&nbsp;</a>
      {% endif %}
    {% endif %}
        </p>
    </div>
  {% endfor %}
  <a href="#" id="showMore" onclick="showHideCode()">更多</a>
    </div>
</div>
<script type="text/javascript">
  
  function showHideCode() {
    {% for un in uName %}
      {% if forloop.counter0 > 13 %}
        $("#{{un}}Button").toggle();
      {% endif %}
    {% endfor %}
    $("showMore").toggle();
  }
  
</script>


  <h1 id="h1">{{ unifyName }}岗位今天有{{ offers}}个offer</h1>
<div class="container"  id="info" style="margin-right:30px;">
    <div class="row">
      <div class="col-xs-0 col-sm-0 col-md-3 col-lg-5 " id="map"style="width: 555px;height:400px;"></div>
      <div class="row">
        <div style="text-align: center;">
          {% if unifyName != special %}
          <a href="/dashboard/jobinfo/{{unifyName}}/{{page}}/edu"  class="btn" type="button">教育背景</a>
          <a href="/dashboard/jobinfo/{{unifyName}}/{{page}}/exp" class="btn btn-default" role="button">工作经验</a>
          <a href="/dashboard/jobinfo/{{unifyName}}/{{page}}/companyType" class="btn btn-default" role="button">公司类型</a>
          <a href="/dashboard/jobinfo/{{unifyName}}/{{page}}/address" class="btn btn-default" role="button">工作地点</a>
          <a href="/dashboard/jobinfo/{{unifyName}}/{{page}}/companyOrientation" class="btn btn-default" role="button">公司方向</a>
          {% endif%}
          {% if unifyName == special %}
          <a href="/dashboard/jobinfo/C%23/{{page}}/edu" class="btn btn-default" role="button">教育背景</a>
          <a href="/dashboard/jobinfo/C%23/{{page}}/exp" class="btn btn-default" role="button">工作经验</a>
          <a href="/dashboard/jobinfo/C%23/{{page}}/companyType" class="btn btn-default" role="button">公司类型</a>
          <a href="/dashboard/jobinfo/C%23/{{page}}/address" class="btn btn-default" role="button">工作地点</a>
          <a href="/dashboard/jobinfo/C%23/{{page}}/companyOrientation" class="btn btn-default" role="button">公司方向</a>
          {% endif%}
        </div>
        <div class="col-xs-0 col-sm-0 col-md-2 col-lg-5 " id="stats" style="width: 555px;height:400px;"></div>
      </div>

    </div>
  </div>
  <script type="text/javascript">
    var dom = document.getElementById("stats");
    var myChart = echarts.init(dom);

    var lab = {{ lab | safe }};
    var data = {{ data | safe }};
    console.log(lab);
    console.log(data);
    var option = "{{ option | safe }}";


    option = {
      legend: {},
      tooltip: {},
      toolbox: {
        show: true,
        feature: {
            magicType: {type: ['stack']},
            restore: {},
        }
    },
      dataset: {
        source: data
      },
      xAxis: {
        type: 'value',
        axisLabel: {
          interval: 0
        },
        name: "万/月",

      },
      yAxis: {
        type: 'category',
        data: lab,
        axisLabel: {
          interval: 0,
          // rotate: 30
          formatter: function (value) {
            var len = value.length;//单个标签的字符长度
            var max_num = 10;
            var row_num = Math.ceil(len / max_num);

            var last_str = "";

            if (row_num > 1) {
              for (var i = 0; i < row_num; i++) {
                var temp = "";
                var start = i * max_num;
                var end = start + max_num;

                if (i == row_num - 1) {
                  temp = value.substring(start, len);
                }
                else {
                  temp = value.substring(start, end) + "\n";
                }

                last_str += temp;


              }
            }
            else {
              last_str = value;
            }

            return last_str;

          }
        },

      },
      brush: {
        xAxisIndex: 0
      },
      title: {
        show: true,
        left: 'left',
      },
      grid: {
        show: true,
        borderColor: "#c45455",
        left: "20%",//grid 组件离容器左侧的距离。

      },


      // Declare several bar series, each will be mapped
      // to a column of dataset.source by default.
      series: [{
        type: 'bar',
        data: data[0],
        name: 'min',
        itemStyle: {
          color: '#009ad6'
        },
      },
      {
        type: 'bar',
        data: data[1],
        name: 'medium',
        itemStyle: {
          color: '#145b7d'
        },
      },
      {
        type: 'bar',
        data: data[2],
        name: 'max',
        itemStyle: {
          color: '#d93a49'
        },
      }

      ],

    };



    // 使用刚指定的配置项和数据显示图表。
    if (option && typeof option === "object") {
      myChart.setOption(option, true);
    }
  </script>
  <div class="container" id="table">
      <table class="table table-bordered">
          <thead>
              <tr>
                  <th><i class="fa fa-tag">ID</th>
                  <th><i class="fa fa-link"></i>职业名</th>
                  <th><i class="fa fa-suitcase"></i>公司名</th>
                  <th><i class="fa fa-address"></i>招聘地址</th>
                  <th><i class="fa fa-rmb"></i>薪水(万/月)</th>
              </tr>
          </thead>
          <tbody>
              {% for j in job_dices %}
                <tr id="{{ forloop.counter }}tr">
                    <script>//<!--用于给记录上ID-->
                          var page={{ page }}-1;
                          var tr=document.getElementById("{{ forloop.counter }}tr");

                          var id=page*{{ per_page }}+{{ forloop.counter }};

                          var td=document.createElement("td");
                          td.innerHTML=id;
                          tr.appendChild(td);
                    </script>

                    <td><a href={{j.jobURL}}>{{j.jobName}}</a></td>
                    <td>{{j.company}}</td>
                    <td>{{j.address}}</td>
                    <td>{{j.salary}}</td>
                </tr>
                {% empty %}
                        <h1>暂时没有你要找的信息</h1>
              {% endfor %}
          </tbody>
      </table>
        <nav aria-label="Page navigation" id="page_nav">
              <ul class="pagination pagination-lg" id="ul_t">
                  <li>
                    <a id="previous" href="#" aria-label="Previous" onclick="previous_page()">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>

                    <script>

                      var total_pages={{ total_pages |length }};
                      var page={{ page }}; //当前页数
                      var count=0;

                      for(i=page;i<=total_pages;i++)
                      {
                        var p=document.getElementById("ul_t");
                        var li=document.createElement("li");
                        var a=document.createElement("a");

                        if (count == 10) //10页以上显示...和最后一页的按钮
                        {
                          a.innerHTML="...";
                          a.setAttribute("href","#");

                          li.appendChild(a);
                          p.appendChild(li);

                          var f_l=document.createElement('li');
                          var f_a=document.createElement('a');

                          f_a.innerHTML=total_pages;
                          f_a.setAttribute("href",total_pages);

                          f_l.appendChild(f_a);
                          p.appendChild(f_l);

                          break;
                        }


                        a.innerHTML=i;
                        a.setAttribute('href', "/dashboard/jobinfo/{{ unifyName }}/"+i+"/edu");

                        li.appendChild(a);

                        if(i==page)
                        {
                          li.setAttribute("class","active")
                          p.appendChild(li);
                        }
                        else
                        {
                          p.append(li);
                        }

                        count +=1;

                      }

                     </script>

                  <li>
                    <a id="next" href="#" aria-label="Next" onclick="next_page()">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>

                  <form  class="navbar-form navbar-left" method="POST" id="form" >
                    {% csrf_token %}

                    <div class="input-group">
                      <input type="text" class="form-control" placeholder="" aria-describedby="basic-addon1" id="input">
                    </div>

                    <button type="submit" class="btn btn-default navbar-btn" onclick="get_option()" id="to_page">跳转至该页</button>
                    {% csrf_token %}
                  </form>
              </ul>


        </nav>
  </div>
</div>
{% endblock %}

